<!--
 * @Author: chunlai
 * @Date: 2023-08-30 17:02:55
 * @LastEditTime: 2025-08-05 15:26:46
 * @LastEditors: minsheng_insurance_agency_zhoucl
 * @FilePath: \02.bldinsure\src\components\PdfReader.vue
 * @Description: pdf文件展示全局组件(直接传文件地址)
-->

<template>
  <div
    class="ms-popup"
    :class="btype == 'pop' ? 'ispop' : ''"
    sticky
    v-if="modeLoad"
  >
    <div class="pdf-reading-modal">
      <div class="file_name" v-if="pdfName">
        {{ pdfName }}
      </div>
      <div class="reading-box">
        <div id="pdfReading"></div>
      </div>
      <div class="btn-box" v-if="hasBtn === '1' && pdfh5">
        <div
          class="read-back"
          :class="canHandle ? 'active' : ''"
          @click="closePdfPop"
        >
          {{ buttonText }}
          <i v-if="clickMode === '1' && countTime > 0">{{ `${countTime}s` }}</i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PdfReader",
  props: {
    // 按钮可点模式
    clickMode: {
      type: String,
      default: "1", //0非必读 1倒计时 2滚动到文档底部
    },
    hasBtn: {
      type: String,
      default: "1",
    },
    btnText: {
      type: String,
      default: "",
    },
    // 按钮操作类型
    btype: {
      type: String,
      default: "back",
    },
  },
  data() {
    return {
      pdfh5: null,
      countTime: 5,
      timeOutPdf: null,
      pdfUrl: "",
      pdfName: "",
      modeLoad: false,
      readFinish: false,
    };
  },
  components: {},
  computed: {
    canHandle() {
      let res = false;
      if (this.clickMode === "2" && this.readFinish) {
        res = true;
      }
      if (this.clickMode === "1" && this.countTime <= 0) {
        res = true;
      }
      if (this.clickMode === "0") {
        res = true;
      }
      return res;
    },
    buttonText() {
      let res = "我已阅读";
      if (["1", "2"].includes(this.clickMode)) {
        res = "我已逐页阅读并同意";
      }
      if (this.btnText) {
        res = this.btnText;
      }
      return res;
    },
  },
  watch: {},
  created() {
    this.resetModal();
  },
  beforeDestroy() {
    this.resetModal();
  },
  methods: {
    initModule(fileUrl, fileName = "") {
      this.pdfUrl = fileUrl;
      if (fileName) {
        this.pdfName = fileName;
      }
      this.modeLoad = true;

      let that = this;
      if (window.Pdfh5) {
        return that.initPlugPdf();
      }
      pdfJs(function (res) {
        that.initPlugPdf();
      });
    },
    initPlugPdf() {
      this.$nextTick(() => {
        this.pdfh5 = new Pdfh5("#pdfReading", {
          pdfurl: this.pdfUrl,
        });
        let that = this;
        // 监听完成事件
        this.pdfh5.on("complete", function (status, msg, time) {
          // that.pdfPageNum = this.totalNum;
          if (that.clickMode === "1") {
            that.countDownEvent();
          } else if (that.clickMode === "2" && this.totalNum == 1) {
            that.readFinish = true;
          }
        });
        if (this.clickMode === "2") {
          const htmlHeight = document.documentElement.clientHeight; // 屏幕视窗高度
          this.pdfh5.on("scroll", function (scrollTop, currentNum) {
            const v = document.querySelector(".pdfViewer"),
              vH = v.offsetHeight; //文本元素总高度
            // console.log("---0", vH, htmlHeight);
            const maxH = vH - htmlHeight + 100;
            // console.log("scrollEnable", scrollTop, maxH, that.pdfh5.currentNum);
            if (maxH > 0 && scrollTop >= maxH) {
              that.readFinish = true;
            }
          });
        }
      });
    },
    countDownEvent() {
      this.timeOutPdf = setInterval(() => {
        this.countTime--;
        if (this.countTime <= 0) {
          clearInterval(this.timeOutPdf);
        }
      }, 1000);
    },
    closePdfPop() {
      if (!this.canHandle) return;
      if (this.btype == "back") {
        this.$backRouter();
      } else {
        this.$emit("toClick", this.pdfUrl);
      }
    },
    resetModal() {
      this.pdfh5 = null;
      this.pdfUrl = "";
      this.pdfName = "";
      this.timeOutPdf = null;
      this.countTime = 5;
      this.modeLoad = false;
      this.readFinish = false;
    },
  },
};
</script>

<style lang="less" scoped>
.ms-popup {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 2001;
  background-color: rgba(0, 0, 0, 0.7);

  .pdf-reading-modal {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;

    .file_name {
      width: 100%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      padding: 0 10px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      border-bottom: 3px solid #f5f5f9;
    }
    .reading-box {
      flex: 1;
      width: 100%;
      overflow: hidden;
      overflow-y: scroll;
    }
    .btn-box {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 50px;
      color: #ffffff;
      border-top: 3px solid #f5f5f9;
    }
  }
  &.ispop {
    padding-top: 60px;
    .pdf-reading-modal {
      border-radius: 10px 10px 0 0;
      overflow: hidden;
    }
  }
}

.right-fix-btn {
  position: fixed;
  right: 0;
  bottom: 10px;
  z-index: 99;
  color: #ffffff;
}

.read-back {
  width: 90%;
  height: 38px;
  line-height: 38px;
  font-size: 16px;
  letter-spacing: 1px;
  text-align: center;
  color: #bcbec2;
  background-color: #f4f4f5;
  border-radius: 38px;
  &.active {
    color: #ffffff;
    background-color: #f52119;
  }
}
</style>
